import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { getScreenHeight, getScreenWidth } from '@/utils/auto'
import { Button, Card } from '@ant-design/react-native'

const data = [
    {
        title: '纯天然大苹果',
        price: 60,
        img: 'https://cdn7.axureshop.com/demo2024/2188150/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85_1/u3884.jpg',
    },
    {
        title: '凯特芒果',
        price: 25,
        img: 'https://ts1.cn.mm.bing.net/th/id/R-C.9c08937c5d55ece86be83071dcf2ace8?rik=izvuTy3AdXtTTQ&riu=http%3a%2f%2fr.1mutian.com%2fYXUploadFile%2fYXProduct%2fImage%2f2911b7fafecc41d19fab49062aaf5d15_b.jpg&ehk=RY%2bsWax%2f6VU4PII5QEo91MCvNQHrhmak3eX1CRePt%2bM%3d&risl=&pid=ImgRaw&r=0',
    },
    {
        title: '智利车厘子',
        price: 88,
        img: 'https://ts1.cn.mm.bing.net/th/id/R-C.e66cbeec5ea4215a78e6a1fe7f8675e5?rik=k5Xa9H7K6s6YYA&riu=http%3a%2f%2fimages.962360.com%2fgroup1%2fM00%2f00%2f34%2fwKgF9Fd8rSCAEYXqAAQCXG_chyw605.jpg&ehk=OvWNnpCu90mWQPofzvl9FYoSCy5473yWf%2fTxAzSKX20%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    },
]

const myCollect = () => {
    return (
        <View style={styles.container}>
            <Card>
                {
                    data.map((item, index) => (
                        <Card.Body key={index}>
                            <View style={styles.userinfo}>
                                <View style={{ flexDirection: "row", alignItems: "center" }}>
                                    <Image style={styles.avatar} source={{ uri: item.img }}></Image>
                                    <View style={{ alignItems: "center", justifyContent: "center", marginLeft: 10 }}>
                                        <Text>{item.title}</Text>
                                    </View>
                                </View>

                                <View style={styles.name}>
                                    <View style={{
                                        height: 70,
                                        alignItems: "flex-end",
                                        justifyContent: "space-around"
                                    }}>
                                        <Text style={{ color: "orangered", fontSize: 25 }}>￥:{item.price}</Text>
                                    </View>
                                    <View>
                                        <Button type='warning' style={{ width: 100, }} size='small'>取消收藏</Button>
                                    </View>
                                </View>

                            </View>
                        </Card.Body>
                    ))
                }
            </Card>
        </View>
    )
}

export default myCollect

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: getScreenWidth(),
        height: getScreenHeight(),
        padding: 20,
        backgroundColor: "rgb(245,248,255)",
    },
    userinfo: {
        padding: 10,
        flexDirection: "row",
        justifyContent: "space-between",
    },
    name: {
        height: 100,
        width: 100,
        justifyContent: "space-around",
    },
    avatar: {
        width: 60,
        height: 60,
        borderColor: "white",
        borderWidth: 2,
    },
})